<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="template.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.yui-dt {
				margin-top:10px;
			}
			
			.yui-dt table {
				width:100%;
			}
			
			.yui-ac {
				width:200px;
				padding-bottom:1em; 
			}
			
			.label {
				width:20%;
				padding:4px;
			}

			.value {
				width:80%;
				padding:4px;
			}
			
			.grid {
				width:100%;
			}
		</style>
	</ui:define>

	<ui:define name="content">
	
		<h:form prependId="false">
			<p:panel header="Search Movies">
				<h:panelGrid columns="3">
					<h:outputText value="Title: " />
					<p:autoComplete value="#{manageMovies.title}" completeMethod="#{manageMovies.getMoviesByTitle}"/>
					<p:commandButton value="Search" actionListener="#{manageMovies.search}"/>
				</h:panelGrid>
			</p:panel>
			
		
			<p:dataTable id="movies" lazy="true" var="movie" value="#{manageMovies.movies}" rows="5" paginator="true">
				<p:column sortBy="#{movie.title}" filterBy="#{movie.title}">
					<f:facet name="header">
						<h:outputText value="Title" />
					</f:facet>
					<h:outputText value="#{movie.title}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Format" />
					</f:facet>
					<h:outputText value="#{movie.format}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Discs" />
					</f:facet>
					<h:outputText value="#{movie.discs}"></h:outputText>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Options" />
					</f:facet>
					<p:commandLink value="View" async="true" update="detailsTable" oncomplete="detailsDialog.show();">
						<h:graphicImage value="img/search.png" style="border:0;"/>
						<f:setPropertyActionListener value="#{movie}" target="#{manageMovies.movie}" />
					</p:commandLink>
				</p:column>
				
			</p:dataTable>
			
			Export Data
			
			<br />
			
			<h:commandLink>
				<h:graphicImage value="img/excel.png" style="border:0"/>
				<p:dataExporter type="xls" target="movies" fileName="movies" excludeColumns="3"/>
			</h:commandLink>
			
			<h:commandLink>
				<h:graphicImage value="img/pdf.png" style="border:0"/>
				<p:dataExporter type="pdf" target="movies" fileName="movies" excludeColumns="3"/>
			</h:commandLink>
		</h:form>
		
		<p:dialog header="Movie Details" widgetVar="detailsDialog" fixedCenter="true">
			<h:panelGrid id="detailsTable" columns="2" width="300px" >
				<h:outputText value="Title" />
				<h:outputText value="#{manageMovies.movie.title}" />
				
				<h:outputText value="Format" />
				<h:outputText value="#{manageMovies.movie.format}" />
				
				<h:outputText value="Discs" />
				<h:outputText value="#{manageMovies.movie.discs}" />
				
				<h:outputText value="Description" />
				<h:outputText value="#{manageMovies.movie.description}" />
			</h:panelGrid>
		</p:dialog>
	</ui:define>

</ui:composition>